<script setup>
import { Timer } from '@element-plus/icons-vue'
import { onMounted, reactive } from 'vue'
import axios from 'axios'
import {ElMessage} from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const data = reactive({
  tableData: []
})
onMounted(() => {
  getAdvertList()
})

const getAdvertList = ()=> {
  axios({
    method: 'get',
    url: 'http://124.71.66.63:9090/advert/advertList'
  })
  .then((res)=>{
    console.log(res)
    if (res.data.isSuccess == true) {
      data.tableData = res.data.data
    }
  })
}

const handleEdit = (index,row)=> {
  console.log(index)

  router.push({
    path: '/addAdvert',
    query:{
      advertName:row.Advert_name,
      advertDesc:row.Advert_desc,
      advertUrl:row.Advert_url,
      advertImage:row.Advert_image,
      advertDate:row.Advert_date,
      advertId: row.Advert_id
    }
  })
}
const handleDelete = (index) => {
  console.log(data.tableData[index].Advert_id)
  var id = data.tableData[index].Advert_id

  axios({
    url:'http://124.71.66.63:9090/advert/deleteAdvert',
    method: 'post',
    data:{
      id:id
    },
    headers: { 'Content-Type':'application/x-www-form-urlencoded' }
  })
  .then(res => {
    console.log('删除列表',res)
    if (res.data.isSuccess == true){
      ElMessage({
        message:res.data.data,
        type: 'success'
      })
      getAdvertList()
    }else{
      ElMessage({
        message:res.data.errorMsg,
        type: 'error'
      })
    }
  })
}

</script>
<template>
  <div class="list">轮播图列表

    <div class="form-box">
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column label="时间" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <timer />
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.Advert_date }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名字" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #reference>
                {{ scope.row.Advert_name }}
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #reference>
                <el-tag>{{ scope.row.Advert_desc }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="链接" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #reference>
                <el-tag>{{ scope.row.Advert_url }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="300">
          <template #default="scope">
            <div style="display: flex; align-items: center;">
              <span style="margin-left: 10px;">{{ scope.row.Advert_image }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              Edit
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>